<template>
	<vue-content>
	<vue-body>
		<el-table v-loading.body="loading" :data="baseData" border >
			<el-table-column
              prop="couponName"
              label="电子券名称">
            </el-table-column>
            <el-table-column
              label="类型">
              <template slot-scope="scope">
                {{ scope.row.type | type }}
              </template>
            </el-table-column>
            <el-table-column
              prop="restricted"
              label="抵用券限制金额">
            </el-table-column>
            <el-table-column
              prop="denomination"
              label="面值">
            </el-table-column>
            <el-table-column
              label="电子券状态">
              <template slot-scope="scope">
                {{ scope.row.couponStatus | couponStatus}}
              </template>
            </el-table-column>
            <el-table-column
              prop="num"
              label="总数量">
            </el-table-column>
            <el-table-column
              prop="validatyEnd"
              label="有效期结束日期">
            </el-table-column>
		</el-table>
		<el-table v-loading.body="loading" :data="tableData" border ref="table" @selection-change="handleSelectionChange" style="width: 100%">
			<el-table-column prop="productNo" label="商品编号">
			</el-table-column>
			<el-table-column prop="productName" label="商品名称">
			</el-table-column>
			<el-table-column prop="categoryName" label="商品类别名称">
			</el-table-column>
			<el-table-column type="selection" check="true" width="55">
			</el-table-column>
		</el-table>
		<vue-footer style="padding: 5px 0;margin: 0 -5px;float:right;">
			<el-pagination
				:current-page.sync="currentPage"
				:page-size="10"
				layout="total, prev, pager, next"
				:total="pageSize">
			</el-pagination>
		</vue-footer>
		<br/>
		<el-button type="info" class="insProbtn" @click="submit()">提交</el-button>
		<el-button type="info" class="insProbtn" @click="back()">后退</el-button>
	</vue-body>
	</vue-content>
</template>

<script>
	import { detail, queryProlist, relaPro } from "@/services/coupons";
	import { RequestError } from '@/services/errors'
	import { deepClone } from '@/utilities/object'
	export default {
		name: "edit-role",
		components: {
			
		},
		data: () => ({
			tableData: [],
			baseData: [],
			loading: false,
			id: "",
			view: '',
			multipleSelection: [],
			productList: [],
			checkStatus:"",
			couponNo:"",
			currentPage: 1,
			subPage:"",
      		pageSize: 10,
			formFilter: {
				couponNo: ""
     		},
		}),
		props: {},
		created() {
			// 取到路由带过来的参数 
			let routerParams = this.$route.query;
			// 将数据放在当前组件的数据内
			this.id = routerParams.id;
			this.formFilter.couponNo = routerParams.couponNo
			this.couponNo = routerParams.couponNo
			this.loadDetail();
			this.loadData();
		},
		mounted() {
			this.checked();
		},
		methods: {
			closeDialog() {
				this.$emit("close");
			},
			checked() {
				//首先el-table添加ref="table"引用标识
				for(var data of this.tableData) {
					if(data.isChecked === "1") {
						this.$refs.table.toggleRowSelection(data);
					}
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
				this.productList = [];
				for(var data of this.multipleSelection) {
					this.productList.push(data)
				}
			},
			openEdit(){
				this.view = "edit";
			},
			closeDialog() {
				this.view = "";
			},
			async submit() {
				try {
					let subProList = JSON.stringify(this.productList)
					await relaPro({
						couponNo: this.couponNo,
						productList: subProList,
						currentPage:this.currentPage
					})
					this.$message({
						showClose: true,
						message: "提交成功",
						type: "success"
					});
					this.loadData();
				} catch(e) {
					if(e instanceof RequestError) {
						this.$alert(e.message, '提示', {
							type: 'error',
							confirmButtonText: '确定'
						})
					} else {
						throw e
					}
				}
			},
			async currentSub(lastPage) {
				try {
					let subProList = JSON.stringify(this.productList)
					await relaPro({
						couponNo: this.couponNo,
						productList: subProList,
						currentPage:lastPage
					})
				} catch(e) {
					if(e instanceof RequestError) {
						this.$alert(e.message, '提示', {
							type: 'error',
							confirmButtonText: '确定'
						})
					} else {
						throw e
					}
				}
			},
			async loadDetail(){
				this.loading = true
				try {
				let data = await detail(this.id)
				// debugger
				this.baseData = []
				this.baseData.push(data.data)
				this.checkStatus = this.baseData[0].checkStatus
				} catch (e) {
				if (e instanceof RequestError) {
					this.$alert(e.message, '提示', {
					type: 'error',
					confirmButtonText: '确定'
					})
				} else {
					throw e
				}
				}
				this.loading = false
			},
			async loadData() {
				this.loading = true
				try {
					let data = await queryProlist(Object.assign({currentPage: this.currentPage},{perPage:10},this.formFilter))
					this.tableData = data.data;
					this.pageSize = parseInt(data.totalResult)
					this.$nextTick(function() {
						this.checked(); //每次更新了数据，触发这个函数即可。
					})
				} catch(e) {
					if(e instanceof RequestError) {
						this.$alert(e.message, '提示', {
							type: 'error',
							confirmButtonText: '确定'
						})
					} else {
						throw e
					}
				}
				this.loading = false
			},
			back() {
				this.$router.go(-1)
			},
			editFinish(needRefresh) {
				this.view = ''
				if(needRefresh) {
					this.$nextTick(() => {
						// dom元素更新后执行， 因此此处能正确打印出更改之后的值；
						this.loadData()
					})
				}
			}
		},
		filters: {
			promAppro (value) {
				//发券途径
				return {'general': '普通券'}[value]
			},
			useRule (value) {
				//使用规则
				return {'D': '和其他优惠券一起使用', 'M': '叠加使用'}[value]
			},
			type (value) {
				//券类型
				return {'rebate': '折扣券', 'voucher': '抵用券'}[value]
			},
			couponUsedType(value) {
				//电子券状态
				return {'default': '默认', 'share': '可分享', 'useonly': '只可使用'}[value]
			},
			couponType(value) {
				//第三方券类型
				return {'default': '默认', 'third': '第三方'}[value]
			},
			thirdType(value) {
				//使用描述类型
				return {'default': '默认', 'url': '链接'}[value]
			},
			couponStatus(value) {
				//使用描述类型
				return {'00': '草稿', '01': '券已生效', '02': '过期', '03': '删除'}[value]
			},
		},
		watch: {
			currentPage (newVal,oldVal) {
				this.currentSub(oldVal)
				this.loadData(newVal)
			}
		},
	};
</script>

<style>
	.el-table th>.cell {
		text-align: center;
	}
	
	.insProbtn {
		float: right;
		margin-left: 10px;
	}
</style>